import React, { useEffect } from "react";
import { View, StatusBar } from "react-native";
import { Stack } from "expo-router";
import ProfileSettings from "@/components/Settings/Profile";
import { useTheme } from "@/contexts/ThemeContext";
import { getHeaderStyle } from "@/styles/header.style";

export default function ProfileSettingsPage() {
  // 获取当前主题模式和颜色
  const { themeMode, colors } = useTheme();

  // 获取基于当前主题的header样式
  const headerStyles = getHeaderStyle(themeMode);

  // 设置状态栏颜色
  useEffect(() => {
    StatusBar.setBarStyle(
      themeMode === "dark" ? "light-content" : "dark-content",
      true
    );
    StatusBar.setBackgroundColor(colors.background);
  }, [themeMode, colors]);

  return (
    <>
      <Stack.Screen
        options={{
          title: "个人资料",
          headerTitleAlign: headerStyles.headerTitleAlign as "left" | "center",
          headerStyle: headerStyles.headerStyle,
          headerTintColor: headerStyles.headerTintColor,
          headerTitleStyle: headerStyles.headerTitleStyle,
        }}
      />
      <View style={{ flex: 1, backgroundColor: colors.backgroundLight }}>
        <ProfileSettings />
      </View>
    </>
  );
}
